<template>
	<view>
		<view class="od-banner">
			<image class="od-banner-icon" src="/static/resource/images/od_bg_icon.png" mode="widthFix" />
			<view class="od-jd od-jd-0">
				<view class="od-jd-out">
					<view class="od-jd-in"></view>
				</view>
				<view class="vp-flex od-jd-text">
					<view class="vp-flex_1">
						<text class="od-jd-st-0">填写订单</text>
					</view>
					<view class="vp-flex_1">
						<text class="od-jd-st-10">在线支付</text>
					</view>
					<view class="vp-flex_1">
						<text class="od-jd-st-20">专人服务</text>
					</view>
					<view class="vp-flex_1">
						<text class="od-jd-st-30">服务完成</text>
					</view>
				</view>
			</view>
		</view>
		<view class="pub-box">
			<view class="pub-box-bd">
				<view class="weui-cell weui-cell_input">

					<view class="weui-cell__ft_in-access">
						<view class="weui-cell__hd">
							<image class="serv-icon"
								:src="service.icon_image ? service.icon_image_url : '../../static/resource/images/avatar.jpg'">
							</image>
						</view>
						<view class="weui-cell__bd">
							<text class="serv-name">{{ service.name }}</text>
						</view>
					</view>

					<view class="weui-cell__ft">
						<uni-icons type="info-filled" size="30"></uni-icons>
						<view class="f5 ic_info" @click="handleTap">服务内容</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="service.stype == 10 || service.stype == 15 || service.stype == 20">
			<view class="pub-box">
				<view class="pub-box-bd">
					<view class="weui-cell weui-cell_input">
						<view class="weui-cell__hd">
							<view class="weui-label">就诊医院</view>
						</view>
						<view class="<strong>weui-cell__bd</strong>"></view>
						<view class="weui-cell__ft weui-cell__ft_in-access">
							<view>
								<picker @change="onHospitalChange" :value="hospitals_index" :range="hospitals"
									range-key="name">
									<input type="text" :disabled="true" placeholder="请选择要就诊的医院"
										:value="hospitals[hospitals_index].name" placeholder-class="vp-placeholder" />
								</picker>
								
							</view>
						</view>
					</view>
					<view class="weui-cell weui-cell_input">
						<view class="weui-cell__hd">
							<view class="weui-label">就诊时间</view>
						</view>
						<view class="weui-cell__bd"></view>
						<view class="weui-cell__ft weui-cell__ft_in-access">
							<view>
								<dtPicker @dtPickerChanged="onStartTimeChanged" :timestamp="order.starttime"
									placeholder="请选择就诊时间"></dtPicker>
							</view>
						</view>
					</view>
					<view class="weui-cell weui-cell_input" @click="onClientChange">
						<view class="weui-cell__hd">
							<view class="weui-label">就诊人</view>
						</view>
						<view class="weui-cell__bd"></view>
						<view class="weui-cell__ft weui-cell__ft_in-access">
							<view   v-if="service.stype==10||service.stype==15||service.stype==20">
								<input class="weui-input" placeholder-class="vp-placeholder" placeholder="请选择就诊人"
									style="text-align: right;" :disabled="true" :value="client.name" type="text">
							</view>
						</view>
					</view>
					   
					<view v-if="service.stype == 15">
						<!-- 接送陪诊 -->
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__hd">接送地址</view>
							<view class="weui-cell__bd">
								<input class="weui-input" name="receiveAddress" style="text-align: right"
									placeholder-class="vp-placeholder" placeholder="请填写就诊人所在地址"
									v-model="order.receiveAddress" />
							</view>
						</view>
					</view>

					<view class="weui-cell weui-cell_input">
						<view class="weui-cell__hd">联系电话</view>
						<view class="weui-cell__bd">
							<input class="weui-input" type="number" name="tel" style="text-align: right"
								placeholder-class="vp-placeholder" placeholder="请填写您的联系电话" v-model="order.tel" />
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="service.stype==30 || service.stype == 40">
		    <!-- 送取结果,代跑取药 -->
		    <view class="pub-box">
		        <view class="pub-box-bd">
		            <view class="weui-cell weui-cell_input">
		                <view class="weui-cell__hd">
		                    <view class="weui-label">所在医院</view>
		                </view>
		                <view class="weui-cell__bd"></view>
		                <view class="weui-cell__ft weui-cell__ft_in-access">
		                    <view>
		                        <picker @change="onHospitalChange" :value="hospitals_index" :range="hospitals"
		                            range-key="name">
		                            <input type="text" :disabled="true" placeholder="请选择就诊所在医院"
		                                :value="hospitals[hospitals_index].name" placeholder-class="vp-placeholder" />
		                        </picker>
		                    </view>
		                </view>
		            </view>
							
		            <view class="weui-cell weui-cell_input">
		                <view class="weui-cell__hd">
		                    <view class="weui-label">服务时间</view>
		                </view>
		                <view class="weui-cell__bd"></view>
		                <view class="weui-cell__ft weui-cell__ft_in-access">
		                    <view>
		                       <dtPicker @dtPickerChanged="onStartTimeChanged" :timestamp="order.starttime"
		                            placeholder="请选择期望服务时间"></dtPicker>
		                    </view>
		                </view>
		            </view>
							
		            <view class="weui-cell weui-cell_input" @click="onAddressChange">
		                <view class="weui-cell__hd">
		                    <view class="weui-label">收件信息</view>
		                </view>
		                <view class="weui-cell__bd"></view>
		                <view class="weui-cell__ft weui-cell__ft_in-access">
		                    <input class="weui-input" :disabled="true" style="text-align: right"
		                        placeholder-class="vp-placeholder" placeholder="请选择收件信息" :value="order.address.userName ? order.address.userName  + ' '+order.address.cityName + order.address.countyName + order.address.detailInfo : '' " />
		                    {{order.address?order.address.telNumber:''}}
		                </view>
		            </view>
		            <view class="weui-cell weui-cell_input">
		                <view class="weui-cell__hd">联系电话</view>
		                <view class="weui-cell__bd">
		                    <input class="weui-input" type="number" name="tel" style="text-align: right"
		                        placeholder-class="vp-placeholder" placeholder="请填写您的联系电话" v-model="order.tel" />
		                </view>
		            </view>
		        </view>
		    </view>
							
		    <view class="pub-box">
		        <view class="pub-box-tt">服务需求</view>
		        <view class="pub-box-bd">
		            <view class="weui-cell weui-cell_input">
		                <view class="weui-cell__bd">
		                    <textarea name="demand" auto-height placeholder="如有其他服务要求请在此填写.."
		                        placeholder-class="vp-placeholder" style="min-height: 150rpx" v-model="order.demand" />
		                </view>
		            </view>
		        </view>
		    </view>
		</view>
		<view class="pub-box">
			<view class="pub-box-tt">服务需求</view>
			<view class="pub-box-bd">
				<view class="weui-cell weui-cell_input">
					<view class="weui-cell__bd">
		                       <textarea name="demand" auto-height placeholder="请简单描述您要就诊的科室.."
		                            placeholder-class="vp-placeholder" style="min-height: 150rpx" v-model="order.demand" />
		                    </view>
				</view>
			</view>
		</view>
		  <block v-if="service.stype == 110">
		        <!-- 上门服务 -->
		        <view class="pub-box">
		            <view class="pub-box-bd">
		                <view class="weui-cell weui-cell_input">
		                    <view class="weui-cell__hd">
		                        <view class="weui-label">服务时间</view>
		                    </view>
		                    <view class="weui-cell__bd"></view>
		                    <view class="weui-cell__ft weui-cell__ft_in-access">
		                        <view>
		                            <dtPicker @dtPickerChanged="onStartTimeChanged" :timestamp="order.starttime"
		                                placeholder="请选择期望服务时间"></dtPicker>
		                        </view>
		                    </view>
		                </view>
		
		                <view class="weui-cell weui-cell_input" @click="onClientChange">
		                    <view class="weui-cell__hd">服务对象</view>
		                    <view class="weui-cell__bd"></view>
		                    <view class="weui-cell__ft weui-cell__ft_in-access">
		                        <input class="weui-input" :disabled="true" style="text-align: right"
		                            placeholder-class="vp-placeholder" placeholder="请选择服务对象" :value="client.name" />
		                    </view>
		                </view>
		                <view class="weui-cell weui-cell_input">
		                    <view class="weui-cell__hd">服务地址</view>
		                    <view class="weui-cell__bd">
		                        <input class="weui-input" name="receiveAddress" style="text-align: right"
		                            placeholder-class="vp-placeholder" placeholder="请填写服务所在地址" v-model="order.receiveAddress" />
		                    </view>
		                </view>
		                <view class="weui-cell weui-cell_input">
		                    <view class="weui-cell__hd">联系电话</view>
		                    <view class="weui-cell__bd">
		                        <input class="weui-input" type="number" name="tel" style="text-align: right"
		                            placeholder-class="vp-placeholder" placeholder="请填写您的联系电话" v-model="order.tel" />
		                    </view>
		                </view>
		            </view>
		        </view>
		
		        <view class="pub-box">
		            <view class="pub-box-tt">服务需求</view>
		            <view class="pub-box-bd">
		                <view class="weui-cell weui-cell_input">
		                    <view class="weui-cell__bd">
		                        <textarea name="demand" auto-height placeholder="请简单描述您要就诊的科室.."
		                            placeholder-class="vp-placeholder" style="min-height: 150rpx" v-model="order.demand" />
		                    </view>
		                </view>
		            </view>
		        </view>
		    </block>
		    <!-- 悬浮提交按钮 -->
		    <view class="vp-foot">
		        <view style="background: #ffffff; padding: 20rpx">
		            <view class="xieyi" style="text-align: center">
		                <text :class="'is_xieyi ' + (is_xieyi ? 'is_xieyi_on' : '')" @click="onXieyiChange">我已阅读并同意</text>
		                <navigator :url="cfg.page_xy">《用户协议》</navigator>
		                <text>和</text>
		                <navigator :url="cfg.page_fw">《服务协议》</navigator>
		            </view>
		            <view>
		                <button :class="'btnp ' + (is_xieyi ? '' : 'btnp-disabled')" @click="submit">
		                    确认下单
		                    <block v-if="order.price > 0">（支付{{ order.price }}元）</block>
		                </button>
		            </view>
		        </view>
		    </view>
			<!-- 弹出层 -->
		    <uni-popup ref="popup" type="center" :is-mask-click="false" background-color="#fff">
		        <view class="popup-content">
		            <view class="group">
		                <input class="uni-input" type="tel" v-model="validMobile.phone" placeholder="手机号" />
		            </view>
		            <view class="group">
		                <input class="uni-input" v-model="validMobile.validCode" placeholder="验证码" />
		                <text class="valid-text" @click="countdownChange">{{countdown.validText}}</text>
		            </view>
		        </view>
		        <view class="btns">
		            <view class="cancal" @click="cancal">取消</view>
		            <view class="ok" @click="confirm">确定</view>
		        </view>
		    </uni-popup>

	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import request from '../../common/utils/request';
	import {
		ref,
		toRaw,
		reactive
	} from 'vue';

	const service = ref({})
	const  serviceShow=ref()
	const hospitals = ref([])

	const popup=ref()
	//预选中index
	const hospitals_index = ref(0)
	//是否同意协议
	const  is_xieyi=ref(false)
	const countdown=reactive({
		validText:'获取验证码',
		time:60
	})
  
	const validMobile =reactive({
		phone:"",
		validCode:''
	})
	const cfg=reactive({
		page_xy:'',
		page_fw:''
	})
	const client=reactive({
		name:''
	})
	const order = reactive({
		price:'',
		starttime:0,
		address: {
			cityName: "",
			countyName: "",
			detailInfo: "",
			userName: "",
			telNumber:''
		},
		receiveAddress:'',
		tel:'',
		demand:''
	})
	onLoad((options) => {
		// console.log(options);
		const svid = options
		serviceArr(svid)
		
		
		
	})


	const serviceArr =  (svids) => {
		 request.request('/Service/order', "GET", {
			svid: svids.svid
		}).then((res) => {
			// console.log(res,"----------------------");
			service.value = toRaw(res.data.service)
		
			
			// console.log(service.value,"-------------------------------------");
			hospitals.value = res.data.hospitals
		
			// console.log(res.data);
			const hospitalsDate = toRaw(hospitals.value)

				for (let i = 0; i < hospitalsDate.lenght; i++) {
					if (hospitalsDate[i].id == svid.hid) {
						hospitals_index.value = i
						order.price=hospitalsDate[i].service_price
						break;
					}
				}
		


		})
	}
	//弹出层	
	const handleTap = () => {

	}
	//选择医院
	const onHospitalChange = (e) => {
		// console.log(e);
		const value =e.detail.value
		hospitals_index.value=value
		order.price= toRaw(hospitals.value)[value].service_price
	}
	//日期
	const onStartTimeChanged=(e)=>{
		order.starttime=e.detail.value
	}
	const onClientChange=()=>{
		uni.navigateTo({
			url:"/pages/clients/index?act=select"
		})
	}
	uni.$on('clientsChange',data=>{
		// console.log(data);
		client.name=data.name
		client.age=data.age
		client.mobile=data.mobile
		client.sex=data.sex
		client.id=data.id
	
	})
		const onAddressChange=()=>{
			uni.chooseAddress({
				success: (res) => {
					// console.log(res)
					order.address.cityName=res.cityName,
					order.address.countyName=res.countyName,
					order.address.detailInfo=res.detailInfo,
					order.address.userName=res.userName,
					order.address.telNumber=res.telNumber
				},
				fail: (err) => {
					// console.log(err);
					
				}
			})
		}
	const onXieyiChange=()=>{
		is_xieyi.value=!is_xieyi.value 
	}
	//确认下单
	const submit=()=>{
		
		if(!is_xieyi.value){
			return uni.showToast({
				title:"请先阅读并同意用于协议和服务协议",
				icon:"none"
			})
		}
	
		
		const orderData=toRaw(order)
		const hospitalsDate=toRaw(hospitals.value)
		const serviceData=toRaw(service.value)
		const clientData=toRaw(client)
		
		
		orderData.service_code=serviceData.code
		orderData.service_id=serviceData.id
		orderData.service_name=serviceData.name
		orderData.service_stype=serviceData.stype
			
		
		if(serviceData.stype<100){
			if(hospitals_index.value==0){
				return uni.showToast({
					title:"请选择医院",
					icon:"none"
				})
			}
			
			// console.log('hospitalsDate',hospitalsDate[hospitals_index.value]);
			orderData.hospital_id=hospitalsDate[hospitals_index.value].id
			orderData.hospital_name=hospitalsDate[hospitals_index.value].name
			
		}
		if(!orderData.starttime){
			return uni.showToast({
				title:"请选择就诊时间",
				icon:"none"
			})
		}
		
		//陪诊
		if(serviceData.stype == 10 || serviceData.stype == 15 || serviceData.stype == 20){
			
		
			if(!clientData.id){
				return uni.showToast({
					title:"请选择就诊人",
					icon:"none"
				})
			}
			
			orderData.client={}
			orderData.client.age=clientData.age
			orderData.client.name=clientData.name
			orderData.client.sex=clientData.sex
			orderData.client.mobile=clientData.mobile
			
			if(serviceData.stype==15){
				if(!orderData.receiveAddress){
					return uni.showToast({
						title:"请填写就诊人地址",
						icon:"none"
					})
				}
			}
			
		}
		
		if(serviceData.stype == 30 || serviceData.stype == 40){
			if(!orderData.address.userName){
				return uni.showToast({
					title:"请填写收件信息",
					icon:"none"
				})
			}
			
			
		}
		if(!orderData.tel){
			
			return uni.showToast({
					title:"请填写联系电话",
					icon:"none"
				})
			} 
		
		if(!uni.getStorageSync('token')){
			popup.value.open('center')
		}
		
	
		createOrder(orderData)
	}	
	
	let flag =false
	const countdownChange=()=>{
		if(!validMobile.phone){
			return uni.showToast({
				title:"请输入手机号",
				icon:"none"
			})
		
		}
		if(flag) return
		
		const time =setInterval(()=>{
			if(countdown.time<=0){
				countdown.validText="获取验证码",
				countdown.time=60
				clearInterval(time)
				// console.log(11111);
			}else{
				countdown.time-=1,
				countdown.validText=`剩余${" " +countdown.time}`
				// console.log(22222);
			}
		},1000)
		flag=true
		
		request.request('/get/code',"POST",{
			tel:validMobile.phone
		}).then(res=>{
			// console.log(res);
		})
	}
	const cancal=()=>{
		popup.value.close()
	}
	const confirm=()=>{
		if(!validMobile.phone){
			return uni.showToast({
				title:"请输入正确手机号",
				icon:"none"
			})
		}else if(!validMobile.validCode){
			return uni.showToast({
				title:"请输入验证码",
				icon:"none"
			})
		}
		
		
		request.request("/user/authentication","POST",{
			tel:validMobile.phone,
			code:validMobile.validCode
		}).then(res=>{
			// console.log(res);
				if(res.data.code=1000){
						uni.setStorageSync('token',res.data.token)
						popup.value.close()
						uni.showToast({
							title:"验证成功"
						})
				}
			
		})
		
	}
const createOrder=(orderData)=>{
	
	console.log(orderData);
	request.request("/pay/createOrder","POST",{
		orderData
	},
	{
		token:uni.getStorageSync('token')
	}).then(res=>{
		console.log(res,"----------------------------------");
	})
}	
</script>

<style>
	@import './index.css';
</style>